<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>个人博客</title>
<link rel="stylesheet"
	href="/static/css/bootstrap.min.css">
<link
	href="/static/css/bootstrapValidator.min.css"
	rel="stylesheet">
<link href="/static/css/main.css"
	rel="stylesheet">
<link
	href="/static/editmd/css/editormd.min.css"
	rel="stylesheet">
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script
	src="/static/js/bootstrapValidator.min.js"></script>
<script src="/static/layer/layer.js"></script>
<script src="/static/lib/marked.min.js"></script>
<script src="/static/lib/prettify.min.js"></script>
<script src="/static/lib/raphael.min.js"></script>
<script src="/static/lib/underscore.min.js"></script>
<script
	src="/static/lib/sequence-diagram.min.js"></script>
<script src="/static/lib/flowchart.min.js"></script>
<script
	src="/static/lib/jquery.flowchart.min.js"></script>
<script src="/static/editmd/editormd.min.js"></script>
<style type="text/css">
		body {
			background: #ffffff;
		}
		.avatar {
		    margin-right: 5px;
		    width: 38px;
		    height: 38px;
		    vertical-align: middle;
		    display: inline-block;
		    cursor: pointer;
		    float: left;
		}
		.avatar img {
		    width: 100%;
		    height: 100%;
		    border: 1px solid #ddd;
		    border-radius: 50%;
		    padding: 5px;
		}
		.sign-container{
			float:left;
			padding: 10px 15px;
		    width: 92%;  
		    height: 80px;  
		    font-size: 13px;
		    border: 1px solid #dcdcdc;
		    border-radius: 4px;
		    background-color: hsla(0,0%,71%,.1);
		    resize: none;
		    display: inline-block;
		    vertical-align: top;
		    outline-style: none;  
		    margin-bottom: 10px;
		}
		.new-comment{
			width: 100%;
			margin-top: 25px;
		}
		.new-comment textarea{
		    padding: 10px 15px;
		    width: 100%;
		    height: 80px;
		    font-size: 13px;
		    border: 1px solid #dcdcdc;
		    border-radius: 4px;
		    background-color: hsla(0,0%,71%,.1);
		    resize: none;
		    display: inline-block;
		    vertical-align: top;
		    outline-style: none;
		}
</style>

</head>
{% include 'blog/nav.html' %}

<hr>

<div class="container">
	<div class="row">
		<div class="col-lg-8 col-md-8 col-md-offset-2 col-lg-offset-2"
			style="background: #ffffff; min-height: 700px">
			<div style="float: left">
				<a href="#"> <img class="cicleImg" alt="" style="margin: 16px;"
					src="/static{{ blog.user.avatar }}">
				</a>
			</div>
			<div style="padding: 8px">
				<div style="margin: 8px">
					<a href="#"
						style="color: #000000; font-weight: bold; margin-top: 25px">
						{{ blog.user.username }} </a>
				</div>
				<p>{{blog.create_time}}</p>
			</div>
			<hr style="clear: left;">
			<!-- 判断是否显示封面 -->
            {% if blog.cover_image != None %}
            	<div style="margin-top: 16px; margin-bottom: 16px">
					<img alt="" style="width: 100%; height: auto"
						src="/static/{{ blog.cover_image }}">
				</div>
            {% endif %}

			<h1 style="margin: 0 auto; padding: 10px; font-weight: bold;">
				{{blog.blog_title}}</h1>
			<div id="doc-content" style="padding: 15px">
				<textarea style="display: none;">{{ blog.blog_content }}</textarea>
			</div>
			<hr>
			<!-- 用戶评论 -->
			<!-- 首先判断用户是否登录 -->
        {% if request.session.userinfo == None  %}
                <div class="new-comment" style="height: 80px">
                        <a class="avatar" > <img
                            src="/static/img/user.png"></a>
                        <div class="sign-container" >
                                <!-- 这里会让响应式布局失效 -->
                                <!-- 需要修改 -->
                                <div style="position:relative; left: 35%;top: 20%">
                                <a href="#" type="button" data-toggle="modal"
                                data-target="#loginDialog" class="btn btn-primary">登录</a>
                                <span>后发表评论</span>
                                </div>
                        </div>
                </div>
        {% else %}
            	<div>
                    <form class="new-comment">
                        <a class="avatar"><img src="/static{{ request.user_object.avatar }}"></a>
                        <textarea placeholder="写下你的评论..."></textarea>
                    </form>
                </div>
            <div style="margin-top: 30px; clear: both;">
				<h4 style="font-weight: bold;margin-left: 12px; float: clear">评论</h4>
				<hr>
				<div  style="width: 226px;height: 92px;margin: 30px auto 20px;
			    background: url(/static/img/icon_comment.png) no-repeat;
			    background-size: contain;">
				</div>
				<div
				style="margin-bottom: 50px;text-align: center;font-size: 12px;color: #969696;">
					<a href="javascript:void()">发表一点想法</a>吧。
    			</div>
			 </div>
        {% endif %}

			<hr> 
		</div>
	</div>
</div>

<script type="text/javascript">
	//渲染MD
	var testEditor;
	$(function() {
		testEditor = editormd.markdownToHTML("doc-content", {//注意：这里是上面DIV的id
			htmlDecode : "style,script,iframe",
			emoji : true,
			taskList : true,
			tex : true, // 默认不解析
			flowChart : true, // 默认不解析
			sequenceDiagram : true, // 默认不解析
			codeFold : true,
		});
	});
</script>
</body>
</html>